<template>
  <view>
    <!-- 搜索框 -->
    <my-search @click="searchClick"></my-search>
    <!-- 分类选择 -->
    <view class="cate-container">
      <!-- 左侧一级分类 -->
      <scroll-view class="cate-left" scroll-y="true" :style="{ height: wh + 'px' }">
        <view
          :class="['cate-left-item', i === active ? 'active' : '']"
          v-for="(item, i) in cateList"
          :key="i"
          @click="changeActive(i)"
        >
          {{ item.cat_name }}
        </view>
      </scroll-view>

      <!-- 右边二级导航 -->
      <scroll-view
        class="cate-right"
        scroll-y="true"
        :style="{ height: wh + 'px' }"
        :scroll-top="scrollTop"
        scroll-with-animation
        enable-back-to-top
      >
        <view class="cate-right-item" v-for="(item, i) in cateList2" :key="i">
          <!-- 二级分类名称 -->
          <view class="cate-right-item-title">/{{ item.cat_name }}/</view>
          <!-- 二级分类详情 -->
          <view class="cate-right-item-detail">
            <view
              class="cate-right-item-detail-box"
              v-for="(data, index) in item.children"
              :key="index"
              @click="goToGoodsList(data)"
            >
              <image :src="data.cat_icon" mode="widthFix"></image>
              <text>{{ data.cat_name }}</text>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import badgeMix from '@/mixins/tabbar-badge.js'
export default {
  mixins: [badgeMix],
  data() {
    return {
      wh: 0, // 窗口可用高度 = 屏幕高度 - navigationBar高度 - tabbar高度
      active: 0, // 左侧一级分类选中索引
      cateList: [], // 分类导航数据
      cateList2: [], // 二级分类数据
      scrollTop: 0 // 切换二级分类后二级分类滚动条距离顶部距离
    }
  },

  onLoad() {
    // 获取窗口可用高度
    const sysInfo = uni.getSystemInfoSync()
    this.wh = sysInfo.windowHeight - 50 // 减去顶部搜索栏的高度

    // 调用获取分类导航数据的方法
    this.getCateList()
  },

  methods: {
    async getCateList() {
      const { data: res } = await uni.$http.get('/categories')
      // 响应异常判断
      if (res.meta.status !== 200) return uni.$showMsg()
      this.cateList = res.message

      // 数据赋值到二级分类
      this.cateList2 = this.cateList[0].children
    },

    // 改变左侧导航栏下标
    changeActive(i) {
      this.active = i
      // 重新赋值二级分类数据
      this.cateList2 = this.cateList[i].children
      // 切换一级分类后修改二级分类滚动条距离顶部的位置
      this.scrollTop = Math.random()
    },

    // 点击二级分类详情跳转到商品列表页
    goToGoodsList(val) {
      uni.navigateTo({
        url: `/subpkg/goods_list/goods_list?cid=${val.cat_id}`
      })
    },

    // 点击搜索按钮
    searchClick() {
      // console.log('search 点击了')
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    }
  }
}
</script>

<style lang="scss">
.cate-container {
  display: flex;
  .cate-left {
    width: 240rpx;
    .cate-left-item {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 120rpx;
      background-color: #efefef;
      font-size: 24rpx;
      // 选中样式
      &.active {
        display: flex;
        justify-content: space-between;
        background-color: #ffffff;
        // 左边红线
        &::before {
          content: '';
          width: 6rpx;
          height: 60rpx;
          background-color: #c00000;
        }
        // 右边白线和背景相同
        &::after {
          content: '';
          width: 6rpx;
          height: 60rpx;
          background-color: #fffff;
        }
      }
    }
  }
}

.cate-right {
  .cate-right-item {
    .cate-right-item-title {
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      padding: 20rpx 0;
    }

    .cate-right-item-detail {
      display: flex;
      flex-wrap: wrap;
      .cate-right-item-detail-box {
        box-sizing: border-box;
        width: 33.33%;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        image {
          width: 100%;
        }
        text {
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>
